<template>
	<!-- 展示内容一 -->
	<view class="navInfo">
		<view class="plua">
			<text class="pluaText">全部城区</text>
			<uni-icons type="arrowright" color="#ccc" size="20"></uni-icons>

			<view class="map_container" :class="isOpen ? 'content-open' : 'content-close'">
				<view class="map" id="map" :class="isOpen ? 'item-open' : 'item-close'">
					<!-- 地图高度设置100%，展开才起效 -->
					<map class="map" id="map" style="width: 100%; height: 100%;" :latitude="latitude" :longitude="longitude" :markers="covers" scale="16" show-location="true"></map>
				</view>
			</view>
			<view class="pullUp">
				<view @click="pullUpClick" v-if="isOpen === false">
					<text>展开地图</text>
					<uni-icons type="arrowdown" size="18"></uni-icons>
				</view>
				<view @click="pullUpClick" v-else>
					<text>收起地图</text>
					<uni-icons type="arrowup" size="18"></uni-icons>
				</view>
			</view>
		</view>
		<!-- 底部卡片   cardWrapperPitch -->
		<view class="pluaBottom">
			<view class="cardWrapper" v-for="(item, index) in marker" @click="cardClick(item, index)" :class="{ cardWrapperPitch: currentIndex === index }">
				<uni-icons class="tick" color="#fff" size="10" type="checkmarkempty"></uni-icons>
				<view class="cardLeft">
					<text class="cardTitle">{{ item.title }}</text>
					<view class="progress-box">
						<progress :percent="item.progress" stroke-width="16" activeColor="#83D207" active="true" />
						<text class="progressInfo">{{ item.markOrde }}单/{{ item.markCup }}杯制作中</text>
					</view>
					<view class="isTrue"><text class="isTrueText">可外送</text></view>

					<view class="cardLeftText">
						<uni-icons class="adressIcon" type="location" size="16" color="#AAAAAA"></uni-icons>
						<text class="cardLeftTextInfo">{{ item.adress }}</text>
					</view>
					<view class="cardLeftTime">
						<uni-icons class="adressIcon" type="checkbox" size="14" color="#AAAAAA"></uni-icons>
						<text class="time">{{ item.beginTime }}-{{ item.overTime }}</text>
					</view>
				</view>
				<view class="cardRight">
					<view class="cardRightButton"><text>去下单</text></view>
					<view class="cardRightDis">
						<text class="rightDis">距离{{ item.jounr }}km</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'showOne',
	props: ['marker'],
	data() {
		return {
			latitude: '',
			longitude: '',
			isOpen: true,
			covers: [],
			currentIndex: 0
		};
	},
	created() {
		this.dataDis();
	},
	methods: {
		pullUpClick() {
			this.isOpen = !this.isOpen;
		},
		progress(value) {
			return value;
		},
		dataDis() {
			this.latitude = this.marker[0].latitude;
			this.longitude = this.marker[0].longitude;
			this.marker.forEach((item, index) => {
				this.covers.push({
					id: item.id,
					title: item.title,
					latitude: item.latitude,
					longitude: item.longitude,
					callout: {
						display: 'ALWAYS'
					}
				});
			});
			console.log(this.covers, 'covers');
		},
		cardClick(item, index) {
			this.currentIndex = index;
			this.latitude = item.latitude;
			this.longitude = item.longitude;
		}
	}
};
</script>

<style scoped>
.navInfo {
	margin-top: 20rpx;
}
.plua {
	padding-top: 20rpx;
}
.pluaText {
	padding-left: 50rpx;
	margin-right: 10rpx;
}
.pluaBottom {
	height: 100%;
	background-color: #f2f2f2;
	padding: 20rpx;
	padding-top: 2rpx;
	padding-right: 0rpx;
	box-sizing: border-box;
}
.map_container {
	margin-top: 25rpx;
}
.pullUp {
	height: 75rpx;
	line-height: 75rpx;
	text-align: center;
	background-color: #ffff;
}
/* 外容器样式 */
.content-open {
	height: 400 rpx;
	overflow: hidden;
	transition: all 0.4s cubic-bezier(0.25, 1, 0.25, 1);
}
.content-close {
	height: 0;
	transition: all 0.4s cubic-bezier(0.25, 1, 0.25, 1);
}
.cardWrapper {
	display: flex;
	position: relative;
	justify-content: space-between;
	box-sizing: border-box;
	width: 710rpx;
	height: 250rpx;
	background-color: #ffff;
	padding: 25rpx;
	margin-top: 20rpx;
	position: relative;
}
.cardWrapperPitch {
	border: 1rpx solid #dba871;
	border-radius: 13rpx;
}
.tick {
	position: absolute;
	z-index: 9;
	bottom: 0;
	right: 0rpx;
}
.cardWrapperPitch::after {
	content: '';
	width: 0rpx;
	height: 0rpx;
	border-top: 40rpx solid transparent;
	border-bottom: 0rpx solid transparent;
	border-left: 250rpx solid transparent;
	border-right: 40rpx solid #dba871;
	position: absolute;
	bottom: 0rpx;
	right: 0;
}
.cardTitle {
	color: #333333;
	font-size: 30rpx;
	font-weight: bold;
}
.cardLeft {
	width: 450rpx;
	position: relative;
}
.cardLeft::after {
	content: '';
	width: 1px;
	height: 170rpx;
	background-color: #f2f2f2;
	position: absolute;
	right: -55rpx;
	top: 20rpx;
}
.cardLeftText {
	margin-bottom: 12rpx;
}
.adressIcon {
	margin-right: 13rpx;
}
.time {
	font-size: 10rpx;
	color: #7f7f7f;
}
.cardLeftTextInfo {
	font-size: 10rpx;
	color: #7f7f7f;
}
.cardRight {
	margin: 60rpx 15rpx 0 0;
	text-align: center;
}
.rightDis {
	font-size: 10rpx;
	color: #808080;
}
.progress-box {
	margin-top: 10rpx;
	margin-bottom: 13rpx;
	width: 240rpx;
	position: relative;
}
.progressInfo {
	font-size: 20rpx;
	position: absolute;
	top: -2rpx;
	left: 30rpx;
	color: #333333;
}
.isTrueText {
	position: absolute;
	top: 48rpx;
	left: 255rpx;
	font-size: 10rpx;
	color: #70b503;
	display: block;
	border-radius: 10rpx;
	background-color: #ebfdcf;
}

.progress {
	width: 100%;
}
/deep/ .uni-progress-bar {
	border-radius: 10rpx !important;
}
/deep/ .uni-progress-inner-bar {
	border-radius: 10rpx 0rpx 0rpx 10rpx !important;
}
/deep/ .uni-progress-inner-bar {
	border-radius: 10rpx !important;
}
/* END */

/* 子容器样式 */
.item-open {
	height: 400rpx;
	transition: all 0.4s cubic-bezier(0.25, 1, 0.25, 1);
}
.item-close {
	opacity: 0;
	height: 0;
}
/* END */
</style>
